<template>
	<view class="container bg-main pos-r">
		<use-navbar title="忘记密码"></use-navbar>
		
		<view class="padding-xl dflex-c dflex-flow-c">
			<view class="portrait-box margin-bottom">
				<image mode="aspectFit" class="headimg border-radius-c" :src="'https://img.shihuashengyi.cn/static/images/user/default.png'"></image>
			</view>

			<view class="w-full dflex padding-bottom-sm">
				<view class="iconfont iconshouji margin-right"></view>
				<view class="flex1 dflex">
					<input class="border-line padding-sm flex1" type="number" data-key="mobile" maxlength="11" v-model="phoneNumber" 
					 placeholder="请输入手机号" />
				</view>
			</view>

			<view class="w-full dflex padding-bottom-sm">
				<view class="iconfont iconmima margin-right"></view>
				
				<input class="border-line padding-sm flex1" password v-model="passwd" placeholder="请输入新密码" />

			</view>

			<view class="w-full dflex padding-bottom-sm">
				<view class="iconfont iconyanzheng margin-right"></view>
				<view class="border-line flex1 dflex">
					<input class="padding-sm flex1" type="number" data-key="code" maxlength="6" v-model="code" placeholder="请输入验证码" />
					<view  class="padding-tb-sm ft-base" @click="getCode">{{getCodeText}}</view>
				</view>
			</view>
			<view class="w-full margin-top-xl">
				<view class="dflex-b border-radius-lg">
					<view class="tac padding-tb-sm flex1 bg-base fs" @click="doReset">重置密码</view>
				</view>
			</view>
		</view>

		<!-- 用云版权 -->
		<use-copyright class="pos-f w-full" style="bottom: -30rpx"></use-copyright>
	</view>
</template>

<script>
	import md5 from "@/common/SDK/md5.min.js";
	import {sendVerifyCode,resetLoginPwd} from "@/js_sdk/apis/user.js"
	export default {
		data() {
			return {
				phoneNumber:"",
				code:'',
				passwd:"",
				getCodeText:'获取验证码',
				getCodeBtnColor:"#ffffff",
				getCodeisWaiting:false
			}
		},
		onLoad() {

		},
		methods: {
			Timer(){},
			getCode(){
				if(this.getCodeisWaiting){
					return ;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(255,255,255,0.5)"
				//示例用定时器模拟请求效果
				sendVerifyCode({mobilePhone:this.phoneNumber}).then((res)=>{
					uni.showToast({title: '验证码已发送',icon:"none"});
					this.setTimer();
				}).catch(err=>{
					this.setTimer();
					uni.showToast({title:err.msg,icon:"none"});
				})
			},
			setTimer(){
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(()=>{
					if(holdTime<=0){
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return ;
					}
					this.getCodeText = "重新获取("+holdTime+")"
					holdTime--;
					
				},1000)
			},
			doReset(){
				uni.hideKeyboard()
				//模板示例部分验证规则
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 

				//示例验证码，实际使用中应为请求服务器比对验证码是否正确。
				if(!this.code){ 
					uni.showToast({title: '验证码不正确',icon:"none"});
					return false; 
				}
				uni.showLoading({
					title: '提交中...'
				})
				//模板示例修改本地储存的用户信息，实际使用中请替换为上传服务器修改。
				resetLoginPwd({
					mobilePhone:this.phoneNumber,
					verifyCode:this.code,
					password:md5(this.passwd)
				}).then(res=>{
					if(res.success){
						uni.hideLoading()
						uni.showToast({title: '重置成功',icon:"success"});
						setTimeout(function(){
							uni.navigateBack();
						},1000)
					}
				}).catch(err=>{
					uni.showToast({title: '重置失败',icon:"error"});
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}
	
	.container {
		padding-top: 5vh;
		width: 100vw;
		min-height: 100vh;
		overflow: hidden;
	}
	
	.portrait-box {
		image {
			width: 130rpx;
			height: 130rpx;
			border: 5rpx solid #fff;
		}
	}
</style>
